<template>
  <div>
    <button @click="count--">-</button>
    <span>{{ count }}</span>
    <button v-on:click="count++">+</button>
    <button @click="clickMe">点击了我</button>
    <button @click="clickMeTwo(100, $event)">点击了我</button>
    <p></p>
    <div class="box">
      <h3>黑马自动售货机</h3>
      <button @click="buy(5)">可乐5元</button>
      <button @click="buy(10)">咖啡10元</button>
      <button @click="buy(8)">牛奶8元</button>
    </div>
    <p>银行卡余额：{{ money }}元</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const count = ref(100)
const money = ref(100)
const buy = (price: number) => {
  money.value -= price
}
const clickMe = (event: Event) => {
  console.log(event)
}
const clickMeTwo = (num: number, event: Event) => {
  console.log(num)
  console.log(event)
}
</script>
<style></style>
